<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="base.css">
    <script src="base.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <title>饿了么</title>

</head>

<body>

<div id="app">
    <div class="header">
        <div class="header-one">
            <div class="header-one-a">

                <a href="#"><i class="fa fa-map-marker fa-2x"></i></a>
                <span class="title">厦门软件园3期B区</span>

                <a href="#"> <i class="fa fa-caret-down "></i></a>
            </div>
        </div>
        <div class="header-two">
            <div class="item">
                <a href="#" class="count">
                    <div class="search"><i class="fa fa-search fa-2x"></i></div>
                    <span>搜索饿了么商家、商品名称</span>
                </a>
            </div>
        </div>
    </div>
    <div class="content">
        <transition>
        <!-- swapper -->
        <div class="swapper1" v-if="change">
            <ul>
                <li v-for="site in sites">
                    <a :href="site.url">
                        <div class="some"><img :src="site.img" alt=""></div>
                        {{ site.name }}
                    </a>
                </li>

            </ul>
        </div>
        <div class="swapper1" v-else>
            <ul>
                <li v-for="site in sited">
                    <a href="#">
                        <div class="some"><img :src="site.imgs" alt=""></div>
                        {{ site.name1 }}
                    </a>
                </li>

            </ul>
        </div>
        </transition>
        <div class="add">
            <span :class="{blue:change}" @click="late(true)" ></span>
            <span :class="{blue:!change}" @click="late(false)"></span>
        </div>
        <div class="swapper2">

            <h3 class="index-one">品质套餐</h3>
            <div class="index-two">搭配齐全吃得好</div>
            <div class="index-three">立即抢购 &gt;</div>

            <img src="https://fuss10.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?imageMogr/format/webp/thumbnail/!282x188r/gravity/Center/crop/282x188/">
        </div>
        <div class="swapper3">
            <div class="index-four"><img alt="" class="index-five"
                                         src="https://fuss10.elemecdn.com/8/0e/4dd212d831becab6e3ebd484c0941jpeg.jpeg?imageMogr/format/webp/thumbnail/34x/"
                                         width="25" height="23"><span class="index-six">超级会员</span><span
                    class="index-seven">.</span><span class="index-eight">已为我节省<b>186</b>元</span></div>
            <a href="#" class="index-nine"><b class="index-ten">1</b>
                <span style="vertical-align: center">个奖励金</span></a>
        </div>
        <div class="swapper4">
            <div class="mint-swipe-item" style="display: none; "><a href="#;"><img class="index-1eegU_1"
                                                                                   src="https://fuss10.elemecdn.com/7/05/bb01f6e34c18a0e12d39b7c98e6f6jpeg.jpeg?imageMogr/format/webp/thumbnail/568x/"></a>
            </div>
            <div class="mint-swipe-item is-active" style="display: none; "><a href="#"><img class="index-1eegU_1"
                                                                                            src="https://fuss10.elemecdn.com/5/e6/955bdd098effd615d144441084118jpeg.jpeg?imageMogr/format/webp/thumbnail/568x/"></a>
            </div>
            <div class="mint-swipe-item" style="display: block; "><a href="#:;"><img class="index-1eegU_1"
                                                                                     src="https://fuss10.elemecdn.com/0/ff/edc9f276114b06237b7b50c21e505jpeg.jpeg?imageMogr/format/webp/thumbnail/568x/"></a>
            </div>

        </div>
        <div class="swapper5">

            推荐商家

        </div>
        <div class="swapper6">
            <a href="#"><span>综合排序</span><i class="fa fa-caret-down "></i></a>
            <a href="#"><span>距离最近</span></a>
            <a href="#"><img
                    src="https://fuss10.elemecdn.com/8/0e/4dd212d831becab6e3ebd484c0941jpeg.jpeg?imageMogr/format/webp/thumbnail/34x/"
                    alt="" width="16"><span>会员领红包</span></a>
            <a href="#"><span>筛选<i class="fa  fa-filter"></i></span></a>
        </div>
        <div class="swapper7" id="kun">
            <ul>
                <li v-for="sky in skys">
                    <a href="">
                        <div class="cxk">
                            <!--<div class="photo">-->
                            <img :src="sky.img" alt="" class="photo">

                            <!--</div>-->
                            <div class="pop">
                                <h3><span class="game"> {{ sky.name }}</span></h3>
                                <span class="index-omit_1q3Tw0_">{{ sky.name4 }}</span>
                                <div class="aline">
                                    <img :src="sky.img1" alt="">
                                    <span>{{ sky.name1 }}</span>
                                    <span>{{ sky.name2 }}</span>
                                    <div v-if="sky.name5.length !=0" class="air">
                                        {{ sky.name5 }}
                                    </div>
                                </div>
                                <div class="momo">
                                    <span>{{ sky.name6 }}</span>
                                    <span class="list">{{ sky.name8 }}</span>
                                    <span>{{ sky.name7 }}</span>

                                    <span class="crown">{{ sky.name9 }}</span>
                                    <span class="list">{{ sky.name10 }}</span>
                                    <span>{{ sky.name11 }}</span>
                                </div>
                            </div>
                            <div class="last">
                                <div class="ctrl"><span>{{ sky.name12}}</span></div>
                                <div class="center">
                                    <div class="center1">
                                        <span class="index-a"><span class="index-b"
                                                                    style="background-color: rgb(240, 115, 115);border-radius: 2px ;display: inline-block;width: 17px;height: 17px;">
              {{ sky.name13}}
            </span></span>
                                        <span class="index-c">{{ sky.name14}}</span>
                                    </div>
                                    <div class="center1">
                                       <span class="index-a"><span class="index-b"
                                                                   style="background-color: rgb(240, 115, 115);border-radius: 2px ;display: inline-block;width: 17px;height: 17px;">
              {{ sky.name15}}
            </span></span>
                                        <span class="index-c">{{ sky.name16}}</span>
                                    </div>

                                </div>
                                <div class="center3"><span>{{ sky.name17}}</span><i class="fa fa-caret-down"></i>
                                </div>
                            </div>
                        </div>

                    </a>

                </li>
            </ul>
            <div class="swapper8">
                <a href="">
                    <span></span>
                    <i class="fa fa-arrow-up fa-2x" style="color: #8e8e93"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="footer">

        <a :href="item.url" v-for="(item,index) in items" :class="{normal:item.normal,active:item.active}"
           @click="active(index)">
            <i :class="item.photo"></i>
            <span>{{item.name}}</span>

        </a>

    </div>
</div>

</body>

<script>

    // $(function () {
    //     $('.navlog').click(function () {
    //         $(this).css('color', '#0089dc').siblings().css('color', '#8e8e93');
    //     })
    // })

    var vm = new Vue({
        el: '#app',
        data: {
            change:true,
            sites: [
                {
                    name: '美食',
                    img: 'https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/',
                    url:"美食首页.html"
                },
                {
                    name: '晚餐',
                    img: "https://fuss10.elemecdn.com/e/89/185f7259ebda19e16123884a60ef2jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '商超便利',
                    img: "https://fuss10.elemecdn.com/c/7e/76a23eb90dada42528bc41499d6f8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '水果',
                    img: "https://fuss10.elemecdn.com/0/d0/dd7c960f08cdc756b1d3ad54978fdjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '医药健康',
                    img: "https://fuss10.elemecdn.com/7/0a/af108e256ebc9f02db599592ae655jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '浪漫鲜花',
                    img: "https://fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '汉堡披萨',
                    img: "https://fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '厨房生鲜',
                    img: "https://fuss10.elemecdn.com/c/21/e42997b86b232161a5a16ab813ae8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '炸鸡炸串',
                    img: "https://fuss10.elemecdn.com/a/78/0fb469b2da210827ec16896e00420jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },
                {
                    name: '地方菜系',
                    img: "https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
                },

            ],
            skys: [
                {
                    name: "茶巢(中航城店)",
                    img: "https://fuss10.elemecdn.com/9/af/ec17bf2793f6fa3a35786a85362e6jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.7",
                    name2: "月售927单",
                    name4: "\b···",
                    name5: "蜂鸟专送",
                    name6: "¥20起送",
                    name7: "配送费¥1.1",
                    name8: "|",
                    name9: "2.61km",
                    name10: "|",
                    name11: "35分钟",
                    name12: "奶茶果汁",
                    name13: "减",
                    name14: "满30减10，满50减16，满105减35",
                    name15: "折",
                    name16: "折扣商品7折起",
                    name17: "7个活动"
                },
                {
                    name: "东池便当(软件园三期店)",
                    img: "https://fuss10.elemecdn.com/4/e7/c60e6aadc413a5ceac62a408f1e0dpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.7",
                    name2: "月售2298单",
                    name4: "\b···",
                    name5: "蜂鸟专送",
                    name6: "¥20起送",
                    name7: "配送费¥0.1",
                    name8: "|",
                    name9: "781m",
                    name10: "|",
                    name11: "30分钟",
                    name12: "其他快餐",
                    name13: "减",
                    name14: "满19减8，满55减30，满102减45",
                    name15: "特",
                    name16: "特价商品15.88元起",
                    name17: "7个活动"
                },
                {
                    name: "兴兴熏鹅",
                    img: "https://fuss10.elemecdn.com/e/d5/2894ea887cff71561ba72132e47e7jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.5",
                    name2: "月售1456单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥20起送",
                    name7: "免配送费",
                    name8: "|",
                    name9: "1.43km",
                    name10: "|",
                    name11: "29分钟",
                    name12: "盖浇饭",
                    name13: "减",
                    name14: "满25减15，满35减21，满47减26",
                    name15: "换",
                    name16: "特价商品2元起",
                    name17: "5个活动"
                },

                {
                    name: "粥宫壹号(软三中交和美店)",
                    img: "https://fuss10.elemecdn.com/f/2b/ba1f5303be51b51ece5bc74d01f71jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.8",
                    name2: "月售1217单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥20起送",
                    name7: "配送费¥2.1",
                    name8: "|",
                    name9: "1.04km",
                    name10: "|",
                    name11: "25分钟",
                    name12: "粥店",
                    name13: "减",
                    name14: "满25减17，满49减24，满79减30",
                    name15: "折",
                    name16: "折扣商品5折起",
                    name17: "8个活动"
                },
                {
                    name: "蒸佰惠黄焖鸡米饭(软三店)",
                    img: "https://fuss10.elemecdn.com/b/f2/2d0fede0454b4d7d3eaedf19c3416jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.4",
                    name2: "月售948单",
                    name4: "\b···",
                    name5: "蜂鸟专送",
                    name6: "¥20起送",
                    name7: "配送费¥1.1",
                    name8: "|",
                    name9: "1.04km",
                    name10: "|",
                    name11: "30分钟",
                    name12: "黄焖鸡米饭",
                    name13: "减",
                    name14: "满20减20，满45减23，满70减36，满100减55",
                    name15: "特",
                    name16: "特价商品0.8元起",
                    name17: "6个活动"
                },
                {
                    name: "尊宝比萨（诚毅广场店）",
                    img: "https://fuss10.elemecdn.com/e/d6/3111adefd95b72c01da5e367a8cfbpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.7",
                    name2: "月售1121单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥30起送",
                    name7: "配送费¥5",
                    name8: "|",
                    name9: "2.03km",
                    name10: "|",
                    name11: "30分钟",
                    name12: "黄焖鸡米饭",
                    name13: "减",
                    name14: "满20减20，满45减23，满70减36，满100减55",
                    name15: "特",
                    name16: "特价商品0.8元起",
                    name17: "6个活动"
                },
                {
                    name: "曼玲粥店(集美软三店)",
                    img: "https://fuss10.elemecdn.com/7/e2/9bcc6de92c71c5f7b975a804ca7d0png.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.7",
                    name2: "月售1121单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥20起送",
                    name7: "配送费¥1.6",
                    name8: "|",
                    name9: "1.41km",
                    name10: "|",
                    name11: "32分钟",
                    name12: "粥店",
                    name13: "减",
                    name14: "满25减16，满39减19，满49减22，满79减28",
                    name15: "折",
                    name16: "折扣商品3.6折起",
                    name17: "6个活动"
                }
            ],
            items: [
                {
                    id:1,
                    photo: "fa fa-edge fa-2x",
                    name: "首页",
                    normal: false,
                    active: true,

                },
                {
                    id:2,
                    photo: "fa fa-compass fa-2x",
                    name: "发现",
                    normal: true,
                    active: false
                },
                {
                    id:3,
                    photo: "fa fa-file-text-o fa-2x",
                    name: "订单",
                    normal: true,
                    active: false,
                    url:"我的订单.html"
                },
                {
                    id:4,
                    photo: "fa fa-user fa-2x",
                    name: "我的",
                    normal: true,
                    active: false,
                    url:"登录.html"
                }
            ],
            sited:[
                {
                    imgs:"https://fuss10.elemecdn.com/0/1a/314b6da88ab6c7ae9828f91652d40jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
                    name1:"速食简餐"
                },
                {
                    imgs:"https://fuss10.elemecdn.com/7/d6/6f2631288a44ec177204e05cbcb93jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
                    name1:"地方小吃"
                },
                {
                    imgs:"https://fuss10.elemecdn.com/a/7b/b02bd836411c016935d258b300cfejpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
                    name1:"大牌惠吃"
                },
                {
                    imgs:"https://fuss10.elemecdn.com/e/89/185f7259ebda19e16123884a60ef2jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
                    name1:"米粉面馆"
                },
                {
                    imgs:"https://fuss10.elemecdn.com/5/1a/dc885d2ce022d2ee60495acafb795jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
                    name1:"包子粥店"
                },
                {
                    imgs:"https://fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
                    name1:"速食简餐"
                }
            ],
            isBlue:true
        },
      methods:{
            active:function (index) {
                var i=0;
                for(;i<this.items.length;i++){
                    if(this.items[i].id!=this.items[index].id){
                        this.items[i].normal=true;
                        this.items[i].active=false;
                    }
                }
                this.items[index].normal=false;
                this.items[index].active=true;

            },
          late:function (change) {
              this.change = change;
          }
     }
    });


</script>
<script>


    function resizei() {
        var fs_maxrem = 100;

        var max_width = 720;
        var w_width = window.innerWidth;//获取窗口宽度
        var fsrem = 100;//表示当前的大小


        if (w_width > max_width) {//如果超过最大值，则fs保持最大值
            fsrem = fs_maxrem;
        } else {
            fsrem = fs_maxrem * w_width / max_width;//根据当前的屏幕大小得到当前的fsrem
        }

        document.documentElement.style.fontSize = fsrem + "px";
    }

    resizei();
    //添加窗口大小改变的事件
    window.onresize = function () {
        resizei();
    }
</script>

</html>